<template>
	<div>
		<div class="form">
			<!--<p>广告类型:
				<el-select v-model="filterData.type" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in typeSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>-->
			<el-input v-model="filterData.title" placeholder="Banner标题"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<!--<el-input v-model="filterData.url" placeholder="链接地址"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;-->
			<p>投放模式:
				<el-select v-model="filterData.mode" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in modeSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>
			<el-input v-model="filterData.advId" placeholder="广告编号"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<p>广告分类:
				<el-select v-model="filterData.kind" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in kindSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>
			<el-input v-model="filterData.amount" placeholder="投放数量"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<el-input v-model="filterUnit" placeholder="投放单价"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<!--<p>审核状态:
				<el-select v-model="filterData.status" placeholder="请选择">&nbsp;&nbsp;&nbsp;&nbsp;
					<el-option v-for="item in statusSelect" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</p>-->
			<el-input v-model="filterData.cycle" placeholder="可接广告周期"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
			<p style='margin-bottom: 20px;'>
				<el-button type="info" @click="query">查询</el-button>
				<el-button type="info" @click="reset">重置</el-button>
				<!--<el-button type="info" @click="">导出</el-button>-->
				<!--<el-button type="info" @click="allCheck">批量审核</el-button>-->
			</p>
		</div>
		<el-table border :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<!--<el-button @click.native.prevent="checkIn(scope)" type="text" size="small" v-if="scope.row.status==2">
						审核
					</el-button>-->
					<el-button @click.native.prevent="check(scope)" type="text" size="small">
						查看
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="广告编号" width="100">
			</el-table-column>
			<!--<el-table-column prop="type" label="广告类型" width="80" :formatter="formType">
			</el-table-column>-->
			<el-table-column prop="kind" label="广告分类" width="80" :formatter="formKind">
			</el-table-column>
			<el-table-column prop="title" label="banner标题" width="100">
			</el-table-column>
			<!--<el-table-column prop="resourceUrl" label="资源地址" width="500">
			</el-table-column>-->
			<!--<el-table-column prop="url" label="链接地址" width="100">
			</el-table-column>-->
			<!--<el-table-column prop="content" label="广告内容" width="200" show-overflow-tooltip>
			</el-table-column>-->
			<el-table-column prop="cycle" label="可接广告周期" width="110">
			</el-table-column>
			<el-table-column prop="mode" label="投放模式" width="80" :formatter="formMode">
			</el-table-column>
			<el-table-column prop="amount" label="投放数量" width="80">
			</el-table-column>
			<el-table-column prop="forwardCount" label="已接数量" width="80">
			</el-table-column>
			<el-table-column prop="surplus" label="剩余数量" width="80">
			</el-table-column>
			<el-table-column prop="unitPrice" label="投放单价(元)" width="110" :formatter='formunitPrice'>
			</el-table-column>
			<el-table-column prop="status" label="审核状态" width="100" :formatter="formStatus">
			</el-table-column>
			<el-table-column prop="time" label="提交时间" width="230">
			</el-table-column>
			<el-table-column prop="verifyUserName" label="审核人" width="100">
			</el-table-column>
			<el-table-column prop="time" label="审核时间" width="230">
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
					   :current-page="filterData.current" :current-page.sync="filterData.current" 
					   :page-sizes="[10, 15, 20, 30]" :page-size="filterData.size" 
					   layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<!--查看弹窗-->
		<el-dialog title="广告发布" :visible.sync="centerDialogVisible" width="70%" center>
			<div class="dialog">
				<p>
					<span>广告编号：</span>
					<span class="dialog-msg">
						<el-input v-model="checkData.id" placeholder="广告编号" disabled></el-input>
					</span>
				</p>
				<!--<p>
					<span>广告类型：</span>
					<span class="dialog-msg">
						<el-select v-model="checkData.type" placeholder="请选择" disabled>&nbsp;&nbsp;&nbsp;&nbsp;
							<el-option v-for="item in typeSelect" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</span>
				</p>-->
				<p>
					<span>banner标题：</span>
					<span class="dialog-msg">
						<el-input v-model="checkData.title" placeholder="Banner标题" disabled></el-input>
					</span>
				</p>
				
				<!--<p style="width:100%">
					<span v-for='item in checkData.images' v-if="checkData.type==1 || checkData.type==3">
						<img :src="item" style="width:150px"/>
					</span>
					<span v-for='item in checkData.images' v-if="checkData.type==2 || checkData.type==4">
						<video :src="item" controls="controls">
							当前浏览器不支持 video直接播放，点击这里下载视频： <a :href="item">下载视频</a>
						</video>
					</span>
				</p>
				<p><span>链接地址：</span><span class="dialog-msg"><el-input v-model="checkData.url" placeholder="链接地址" disabled></el-input></span></p>-->
				<!--<p><span>广告内容：</span><span class="dialog-msg"><el-input v-model="checkData.content" placeholder="广告内容" disabled></el-input></span></p>-->
				<addForm :getDataFromSet='checkData.contentGroup' :btnType='btnType' class="addFormChild"></addForm>
				<p><span>投放模式：</span><span class="dialog-msg">
					<el-select v-model="checkData.mode" placeholder="请选择" disabled>&nbsp;&nbsp;&nbsp;&nbsp;
						<el-option v-for="item in modeSelect" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</span></p>
				<p><span>投放数量：</span><span class="dialog-msg"><el-input v-model="checkData.amount" placeholder="投放数量" disabled></el-input></span></p>
				<p><span>投放单价：元</span><span class="dialog-msg"><el-input v-model="checkData.unitPrice" placeholder="投放单价" disabled></el-input></span></p>
				<p><span>可接广告周期：h(>72h)</span><span class="dialog-msg"><el-input v-model="checkData.cycle" placeholder="可接广告周期" disabled></el-input></span></p>
				<!--<el-table border :data="tableLog" style="width: 100%">
					<el-table-column prop="name" label="会员编号" width="100">
					</el-table-column>
					<el-table-column prop="merID" label="真实姓名" width="100">
					</el-table-column>
					<el-table-column prop="advID" label="手机号" width="100">
					</el-table-column>
					<el-table-column prop="type" label="性别" width="80">
					</el-table-column>
					<el-table-column prop="category" label="年龄" width="80">
					</el-table-column>
					<el-table-column prop="banner" label="身份证号">
					</el-table-column>
					<el-table-column prop="resAdd" label="地域">
					</el-table-column>
					<el-table-column prop="target" label="职业" width="100">
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange_filterDataLog" @current-change="handleCurrentChange_filterDataLog" 
							   :current-page="filterDataLog.current" :current-page.sync="filterDataLog.current" 
							   :page-sizes="[10, 15, 20, 30]" :page-size="filterDataLog.size" 
							   layout="total, sizes, prev, pager, next, jumper" :total="logTotal">
				</el-pagination>-->
				<p>
					<span>处理结果：</span><span class="dialog-msg">
	      				<el-radio v-model="checkData.status" :label="1" disabled>通过</el-radio>
	  					<el-radio v-model="checkData.status" :label="2" disabled>不通过</el-radio>
	  				</span>
				</p>
				<p v-if="checkData.status == '2'">
					<span>不通过原因：</span><span class="dialog-msg">
	      				<el-input type="textarea" v-model="checkData.reason" disabled></el-input>
	  				</span>
				</p>
			</div>
			<span slot="footer" class="dialog-footer">
	      <el-button @click="centerDialogVisible = false">取 消</el-button>
	      <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
	    </span>
		</el-dialog>
		<!--审核弹窗-->
		<!--<el-dialog title="审核" :visible.sync="checkInDialog" width="55%" center>
			<p>
				<span>处理结果：</span><span class="dialog-msg">
  				<el-radio v-model="dealData.status" :label="1">通过</el-radio>
				<el-radio v-model="dealData.status" :label="0">不通过</el-radio>
			</span>
			</p>
			<p v-if="dealData.status == '0'">
				<span>不通过原因：</span><span class="dialog-msg">
  				<el-input type="textarea" v-model="dealData.reason"></el-input>
			</span>
			</p>
			<span slot="footer" class="dialog-footer">
		      	<el-button @click="checkInDialog = false">取 消</el-button>
		      	<el-button type="primary" @click="sureCheckIn">确 定</el-button>
		    </span>
		</el-dialog>-->
	</div>
</template>

<script type="text/javascript">
	import {adPage,adInsert,formatter,adType,typeSelect} from '@/api/common'
	import addForm from '@/views/addForm/index'
	export default {  
		components:{
			addForm
		},
		created(){
			this.query();
			this.queryAdType()
		},
		methods: {
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			selectable(row, index){				//判断是否可以选中
	        		//console.log(row)
	        	if(row.status == 2){
	        		return true;
	        	}else{
	        		return false;
	        	}
	        },
	        formStatus(row, column){
	        	return(formatter(row.status,this.statusSelect))
	        },			
			formType(row, column){						
				return(formatter(row.type,this.typeSelect))
			},
			formKind(row, column){		
				return(formatter(row.kind,this.kindSelect))
			},
			formMode(row, column){		
				return(formatter(row.mode,this.modeSelect))
			},
			formunitPrice(row, column){
				return parseInt(row.unitPrice) / 100;
			},
			/*checkIn(data){						//单个审核按钮
				this.checkInDialog = true;
				this.dealData.busIdList = [];
				this.dealData.busIdList.push(data.row.id);
			},
			sureCheckIn(){						//确认审核
				this.checkInDialog = false;
				if(this.dealData.status == 1){
					this.dealData.reason = '';
				}
			},*/
			handleSizeChange(val) {					//每页个数
				this.filterData.size = val;
				this.query();
			},
			handleCurrentChange(val) {				//跳转页
				this.filterData.current = val;
				this.query();
			},
			handleSelectionChange(val) {
				let arr = [];
				val.map(function(item){
					arr.push(item.id)
				});
				this.dealData.busIdList = arr;
			},
			check(data) {							//列表查看
				this.centerDialogVisible = true;
				this.checkData = JSON.parse(JSON.stringify(data.row));	
				if(this.checkData.images){
					this.checkData.images = this.checkData.images.split(',')
				}
				
				this.checkData.unitPrice = parseInt(this.checkData.unitPrice) / 100;
			},
			query(){								//查询
				if(this.filterUnit != null && this.filterUnit != ''){
					this.filterData.unitPrice = parseFloat(this.filterUnit) * 100;
				}
				adPage(this.filterData).then(res =>{
					console.log(res)
					this.tableData = res.data.records;
					this.total = parseInt(res.data.total);
					//console.log(res)
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			queryAdType(){
				adType().then(res =>{
					this.kindSelect = res.data;
				}).catch(res =>{
					this.$message.error(res.msg)
				})
			},
			reset(){										//重置
				this.filterData = {				
					busId:this.$store.state.user.busId,				//商户id
					type: null, 				//广告类型
					title: '', 					//banner标题
					//url: '', 					//链接地址
					mode: null, 				//投放模式
					kind: null, 				//广告分类
					amount: null, 				//投放数量
					unitPrice: null, 			//投放单价
					status: [1,2], 				//审核状态
					id: null, 					//商家编号
					cycle: null, 				//广告周期
					current:1,
					size:10
				};
				this.filterUnit = null
				this.query();
			},
			loadout(){								//导出
				
			},						
			handleSizeChange_filterDataLog(val) {	//详情列表分页操作				
				this.filterDataLog.size = val;
				this.logCheck();
			},
			handleCurrentChange_filterDataLog(val) {
				this.filterDataLog.current = val;
				this.logCheck();
			},
			allCheck(){								//批量审核
				this.checkInDialog = true;
			}
		},
		data() {
			return {
				//主列表数据
				filterData:{
					busId:this.$store.state.user.busId,				//商户id
					type: null, 				//广告类型
					title: '', 					//banner标题
					//url: '', 					//链接地址
					mode: null, 				//投放模式
					kind: null, 				//广告分类
					amount: null, 				//投放数量
					unitPrice: null, 			//投放单价
					status: [1,2], 				//审核状态
					id: null, 					//商家编号
					cycle: null, 				//广告周期
					current:1,
					size:10
				},
				total:null,							//总条数
				centerDialogVisible: false, 		//弹窗显示	
				checkData: {}, 						//列表查看点击数据
				tableData: [],						//主表格数据  
				btnType:1,
				
				//详情数据
				checkInDialog:false,
				filterDataLog:{
					current: 1,						//当前页
					memberId: '',					//用户ID
					size: 10,						//每页条数
					time: "",						//日期输入框
				},
				tableLog:[],						//详情列表数据
				logTotal:null,						//总条数
				
				//处理结果
				dealData:{
					reason:'',							//填写原因
					status:null,						//处理
					adIdList: [],						//多选框
					verifyUser:this.GLOBAL.verifyUser,	//审核人id
				},
				fileList: [],
				filterUnit:null,
				
				
				//辅助性数据
				statusSelect: [{ 				//状态下拉框
					value: 0,
					label: '审核中'
				}, {
					value: 1,
					label: '审核通过'
				}, {
					value: 2,
					label: '审核不通过'
				}, {
					value: 3,
					label: '失效'
				}, {
					value: 4,
					label: '未发布'
				}],
				typeSelect: [typeSelect],	
				kindSelect: [],					//广告分类
				modeSelect: [{ 					//投放模式
					value: 0,
					label: '转发'
				}, {
					value: 1,
					label: '阅读'
				}],
			}
		}
	}
</script>

<style scoped>
	.form .el-input,.form .el-select{
		width: 120px;
		margin-bottom: 20px;
	}
	
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.area-select-wrap {
		display: inline-block;
		margin-right: 20px;
		margin-left: 0;
	}
	
	.area-select-wrap .area-select {
		height: 40px;
		vertical-align: middle;
	}
	
	.dialog p {
		display: inline-block;
		width: 47%;
	}
	.addFormChild {
		border:1px solid #ddd;
		padding:10px
	}
</style>